{% extends 'web/public/layout.html' %}
{% block app-page %}
  <template>
    <div class="row">
      <div class="col-xs-2">
        <input type="text" class="form-control" placeholder="标题、班级名称" v-model="search">
      </div>
      <div class="col-xs-1">
        <button class="btn btn-success" @click="searchData()">查询</button>
      </div>
      <div class="col-xs-1">
        <button class="btn btn-success"><a href="/admin/web/middlesurvey/add/" style="color: white">添加问卷</a></button>
      </div>
    </div>
    <br>
    <el-table :data="tableData" style="width: 100%" @sort-change='sortChange'>
      <el-table-column
          v-for="(column, index) in tableColumn"
          :prop="column.prop"
          :label="column.label"
          sortable="custom"
      >
        <template slot-scope="data">
          <div v-html="data.row[column.prop]"></div>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
          background
          layout="pager"
          :total="total" :page-size="perPage" :current-page="currentPage">
      </el-pagination>
    </div>
  </template>
{% endblock %}
{% block js %}
  <script>

    new Vue({
      el: '#app',
      data: {
        // 展示的字段
        fields: [],
        // 数据
        items: [],
        // 数据数量
        total: 0,
        // 一页多少条
        perPage: 30,
        // 当前页码
        currentPage: 1,
        // 搜索字段值
        orderingFields: ['name', ],
        ordering: '',
        search: '',
        // 排序字段
        tableColumn: [],
        tableData: []
      },
      mounted() {
        this.initData();
        this.initPageBtn();
      },
      computed: {
        // 计算属性的 getter
        offset: function () {
          // `this` 指向 vm 实例
          return (this.currentPage - 1) * this.perPage
        }
      },
      methods: {
        initData() {
          var vm = this;
          axios.get(
            `/api/surveys/?limit=${this.perPage}&offset=${this.offset}&search=${this.search}&ordering=${this.ordering}`
          ).then(function (resp) {
            vm.tableColumn = resp.data.fields;
            vm.tableData = resp.data.result.results;
            vm.total = resp.data.result.count;
          })
        },
        initPageBtn() {
          var vm = this;
          $("ul.el-pager").on("click", "li", function () {
            vm.currentPage = $(this).text();
            vm.initData();
          })
        },
        searchData() {
          this.initData()
        },
        sortChange (column){

          if (column.order){
            let sort = column.order === 'ascending' ? '-': '';
            this.ordering = `${sort}${column.prop}`
          }else {
            this.ordering = '';
          }

          this.initData();
        },
        isSort (column){
          return 'custom'
        }
      }
    })

  </script>
{% endblock %}